<template>
  <div class="" style="background-color: #f9f9f9;">
    <div v-if="loading"
         class="loader-wrapper">
      <pulse-loader></pulse-loader>
    </div>

    <div class="has-text-centered has-text-grey-light" id="yhbanner">
      <div v-if="isMobile()">

        <div v-if="userInfo" class="is-size-4">Welcome, 
          <span v-if="userInfo.is_approve" class="has-text-warning">{{userInfo.eos_address}}</span>
          <span v-else class="has-text-danger">{{userInfo.eos_address}}(未认证)</span>
        </div>
        <div v-else>
          <div class="is-size-4 has-text-danger"> 未登录用户 </div>
        </div>
      </div>


      <div class="container" style="margin-top: 1rem;">
          <div v-if="userInfo" class="modal" id="signin-modal">
            <div class="modal-background"></div>
            <div class="modal-card">
              <header class="modal-card-head">
                <p class="modal-card-title">YDapp签到</p>
                <button class="delete" aria-label="close" @click="hideSignIn()"></button>
              </header>
              <section class="modal-card-body">
                <div class="has-text-black has-text-weight-bold has-text-left">签到题: {{userInfo.sign_in_config.content}}? </div>

                <div class="control">
                  <div v-if="userInfo.sign_in_config.config.choice[0]">
                    <label class="radio">
                      <input type="radio" name="answer" v-model="signAnswer" value="1">
                      {{userInfo.sign_in_config.config.choice[0]}}
                    </label>
                  </div>
                  <div v-if="userInfo.sign_in_config.config.choice[1]">
                    <label class="radio">
                      <input type="radio" name="answer" v-model="signAnswer" value="2">
                      {{userInfo.sign_in_config.config.choice[1]}}
                    </label>
                  </div>
                  <div v-if="userInfo.sign_in_config.config.choice[2]">
                    <label class="radio">
                      <input type="radio" name="answer" v-model="signAnswer" value="3">
                      {{userInfo.sign_in_config.config.choice[2]}}
                    </label>
                  </div>
                  <div v-if="userInfo.sign_in_config.config.choice[3]">
                    <label class="radio">
                      <input type="radio" name="answer" v-model="signAnswer" value="4">
                      {{userInfo.sign_in_config.config.choice[3]}}
                    </label>
                  </div>
                  <div class="has-text-info" style="">* 连续签到第{{userInfo.c_sign_in_days+1}}天, 回答成功获得{{2*(userInfo.c_sign_in_days+1)}}YDAPP, 失败获得{{userInfo.c_sign_in_days+1}}YDAPP</div>
                </div>
                <!-- Content ... -->
              </section>
              <footer class="modal-card-foot">
                <button class="button is-success" @click="signIn()">签到</button>
                <button class="button" @click="hideSignIn()">取消</button>
              </footer>
            </div>

            <button class="modal-close is-large" aria-label="close" @click="hideSignIn()"></button>
          </div>

      <div v-if="!isMobile()" class="columns is-mobile">

        <div class="column is-3">
          <figure class="image is-6by3 ">
            <a href="https://www.cryptothrone.co/" target="_blank" class="image is-6by3">
              <img class="banner-image" src="/static/assets/ydapp_ad.png" alt="Placeholder image">
            </a>
          </figure>
        </div>

        <div class="column is-3">
          <a href="https://www.eosjoy.io/?user=ydapp.game&utm_source=mathwallet" target="_blank" class="image is-6by3 ">
            <img class="banner-image" src="/static/assets/snake.png" alt="Placeholder image">
          </a>
        </div>

        <div class="column is-3">
            <a href="https://ydapp.io/" target="_blank" class="image is-6by3">
              <img class="banner-image" src="/static/assets/ydapp_ad.png" alt="Placeholder image">
            </a>
        </div>

        <div class="column is-3">
          <a href="https://ydapp.io/" target="_blank" class="image is-6by3">
              <img class="banner-image" src="/static/assets/ydapp_ad.png" alt="Placeholder image">
          </a>
        </div>

      </div>

      <div style="margin-top: 0.3rem; margin-bottom: 0.3rem;">
      <a class="has-text-white" href="https://www.eosjoy.io/" target="_blank">
        <i class="iconfont icon-i-sound" style="font-size: 22px;"></i>
        &nbsp; &nbsp; <u class="has-text-dark"> 区块链贪吃蛇, 边玩边赚! </u>&nbsp;&nbsp;<span class="tag is-danger has-text-weight-bold">Hot!!</span>
      </a>
      </div>
    </div>
    </div>

    <div v-if="userInfo" class="container" style="margin-top: 1rem;">
      <div class="columns has-text-dark is-multiline">
        <div class="column is-3">
          身份: 
          <span v-if="userInfo.is_approve" class="">认证会员</span>
          <span v-else class="">未认证会员</span>
        </div>

        <div class="column is-3">
          <div v-if="userInfo.is_approve && !userInfo.has_signed">
            <div class="button is-dark" @click="showSignIn()">
              签到<span class="has-text-warning">&nbsp;New!!</span>
            </div>
          </div>
          <div v-else-if="userInfo.is_approve && userInfo.has_signed"> 已签到 </div>
          <div v-else=""> 认证请联系老陆~(微信号在网页下方) </div>
        </div>
        <div class="column is-6"></div>

        <div class="column is-3">
          邀请排名: {{userInfo.invite_rank}} 
        </div>

        <div class="column is-3">
          邀请人数: {{userInfo.invite_number}}
        </div>

        <div class="column is-3">
          总邀请数: {{userInfo.total_invite_number}} 
        </div>

        <div class="column is-3">
          邀请链接: https://ydapp.io/?r={{userInfo.uid}}
      </div>

        <div class="column is-3">
          总会员数: {{userInfo.total_user_number}}
      </div>

        <div class="column is-3">
          认证会员数: {{userInfo.total_vip_user_number}} 
      </div>
      </div>
    </div>

    <div class="container" style="padding-bottom: 2rem; padding-top: 2rem;">

      <div class="is-size-4 has-text-black"> EOS导航</div>
      <div class="columns is-multiline" style="margin-top: 2rem;">
        <GuideCard name="CPU爆了" image="/static/assets/icon.png" url="https://cpubaole.com/#/" intro="cpu租赁"> </GuideCard>
        <GuideCard name="麦子钱包" image="http://static.togetthere.cn/mathwallet.png" url="http://www.mathwallet.org/cn/" intro="钱包"> </GuideCard>
        <GuideCard name="Scatter" image="https://get-scatter.com/favicon-32x32.png" url="https://chrome.google.com/webstore/search/scatter?utm_source=chrome-ntp-icon" intro="浏览器钱包"> </GuideCard>
        <GuideCard name="Eosflare" image="https://eosflare.io/static/img/icons/eosflare-48.png" url="https://eosflare.io/" intro="区块浏览器"> </GuideCard>
        <GuideCard name="Newdex" image="https://static.togetthere.cn/newdexissuer-ndx.png" url="https://newdex.340wan.com/" intro="交易所"> </GuideCard>
        <GuideCard name="DappReview" image="https://static.togetthere.cn/newdexissuer-ndx.png" url="https://dapp.review/explore/eos" intro="数据排行"> </GuideCard>
      </div>

      <div class="is-size-4 has-text-black"> TRX导航</div>
      <div class="columns is-multiline" style="margin-top: 2rem;">

        <GuideCard name="Tronscan" intro="官方浏览器" url="https://tronscan.org/#/" image="/static/assets/icon.png"> </GuideCard>
        <GuideCard name="DappReview" intro="首家支持波场" url="https://dapp.review/" image="/static/assets/icon.png"> </GuideCard>
        <GuideCard name="麦子钱包" intro="手机钱包" url="http://mathwallet.org/cn/" image="http://static.togetthere.cn/mathwallet.png"> </GuideCard>
        <GuideCard name="TronLink" intro="Chrome插件" url="https://tron.network/wallet?lng=zh" image="/static/assets/icon.png"> </GuideCard>
        <GuideCard name="TronApp" intro="官方市场" url="https://tron.app/" image="/static/assets/icon.png"> </GuideCard>

      </div>

      <div class="is-size-4 has-text-black"> ETH导航</div>
      <div class="columns is-multiline" style="margin-top: 2rem;">

        <GuideCard name="ETH官网" intro="官网" url="https://www.ethereum.org/" image="https://www.ethereum.org/favicon.ico"> </GuideCard>
        <GuideCard name="DappReview" intro="国内第一" url="https://dapp.review/explore/eos" image="/static/assets/icon.png"> </GuideCard>
        <GuideCard name="etherscan" intro="区块浏览器" url="https://etherscan.io/" image="https://etherscan.io/images/favicon2.ico"> </GuideCard>
        <GuideCard name="IMToken" intro="老牌钱包" url="https://token.im/" image="https://token.im/img/favicon-32x32.51845bd2.png"> </GuideCard>
        <GuideCard name="Metamask" intro="浏览器钱包" url="https://metamask.io/" image="https://metamask.io/img/favicon-32x32.png"> </GuideCard>
        <GuideCard name="TrustWallet" intro="评价很好" url="https://trustwallet.com/" image="https://static.togetthere.cn/trustwallet.png"> </GuideCard>
      </div>

      <div class="is-size-4 has-text-black"> IOST导航</div>
      <div class="columns is-multiline" style="margin-top: 2rem;">

        <GuideCard name="官网" intro="Iost官网" url="https://iost.io/" image="https://iost.io/wp-content/uploads/2018/07/cropped-IOST-logo-round-black-1-32x32.png"> </GuideCard>
        <GuideCard name="twitter" intro="官方twitter" url="https://twitter.com/iostoken" image="https://iost.io/wp-content/uploads/2018/07/cropped-IOST-logo-round-black-1-32x32.png"> </GuideCard>
        <GuideCard name="facebook" intro="官方twitter" url="https://www.facebook.com/IOStoken-142477739753567/" image="https://iost.io/wp-content/uploads/2018/07/cropped-IOST-logo-round-black-1-32x32.png"> </GuideCard>
        <GuideCard name="交易所" intro="币市" url="https://dapp.review/explore/eos" image="https://biss.com/vendor/style/titlelogo.png"> </GuideCard>
        <GuideCard name="官方文档" intro="IOST官网" url="https://developers.iost.io/" image="https://developers.iost.io/img/logo.png"> </GuideCard>
        <GuideCard name="Token地址" intro="ERC20" url="https://etherscan.io/token/0xfa1a856cfa3409cfa145fa4e20eb270df3eb21ab?a=0xe6bc59e7de4e4dd2efc1f2fe0065df334e3f5b7d" image="https://developers.iost.io/img/logo.png"> </GuideCard>

      </div>

      <div class="is-size-4 has-text-black"> ONT导航</div>
      <div class="columns is-multiline" style="margin-top: 2rem;">

        <GuideCard name="官网" intro="Ont官网" url="https://ont.io/" image="https://ont.io/images/favicon.ico"> </GuideCard>
        <GuideCard name="区块浏览器" intro="官方浏览器" url="https://explorer.ont.io/" image="https://ont.io/images/favicon.ico"> </GuideCard>
        <GuideCard name="官方文档" intro="Ont官网" url="https://dev-docs.ont.io/#/docs-cn/introduction/01-introduction" image="https://ont.io/images/favicon.ico"> </GuideCard>
        <GuideCard name="麦子钱包" intro="跨链钱包" url="http://www.mathwallet.org/cn/" image="http://static.togetthere.cn/mathwallet.png"> </GuideCard>

      </div>
    </div>

      <div id="yhsns" style="padding-top: 4rem; padding-bottom: 2rem;" class="has-text-centered has-text-white">
      <div class="container">
        <div class="is-size-4"> Ydapp社群 </div>
        <div class="has-text-grey-light"> 微信、qq多平台交流，获取游戏最新信息 </div>
        <div class="" style="padding-top: 2rem; padding-left: 5rem; padding-right: 5rem;">
          <div class="columns">
            <div class="column is-2"></div>
            <div class="column is-8">
        <div class="level">
        <div class="level-item has-text-centered">
          <div>
            <figure class="image is-128x128">
              <img class="banner-image" src="/static/assets/weixin.png">
            </figure>
          </div>
        </div>

        <div class="level-item has-text-centered">
          <div>
            <i class="iconfont icon-weixin" style="color: #3aad74; font-size: 22px;"></i>
            &nbsp; &nbsp; 加助手, 拉你进微信群
          </div>
        </div>

        <div class="level-item has-text-centered">
          <div>
            <figure class="image is-128x128">
              <img class="banner-image" src="/static/assets/qq-group.png">
            </figure>
          </div>
        </div>

        <div class="level-item has-text-centered">
          <div>
            <i class="iconfont icon-qq" style="color: #3675d9; font-size: 22px;"></i>
            &nbsp; &nbsp; qq大群
          </div>
        </div>

        </div>
        </div>
        </div>


        </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import PulseLoader from 'vue-spinner/src/PulseLoader';
  import { mapActions, mapState } from 'vuex';
  import API, { eos, currentEOSAccount } from '@/util/api';
  import GuideCard from '@/components/GuideCard';

  export default {
    name: 'index',
    components: {
      PulseLoader,
      GuideCard
    },

    data() {
      return {
        gameList: {
          eth_list: [],
          eos_list: [],
          other_list: []
        },
        inviteCode: 0,
        signAnswer: 1,
        loading: true,
      };
    },

    computed: {
      ...mapState(['scatterAccount', 'userInfo']),
    },

    async created() {
      this.gameList = await API.getGameList();
      this.inviteCode = this.getInviteCode();
      this.loading = false;
    },

    methods: {
      ...mapActions(['loginScatterAsync']),
      showSignIn() {
        $("#signin-modal").addClass("is-active");
      },
      hideSignIn() {
        $("#signin-modal").removeClass("is-active");
      },
      async signIn() {
        const result = await API.doSignIn(this.signAnswer);
        if (result.err_code == 0) {
          swal("签到成功", "又是元气满满的一天~", "success");
          this.hideSignIn();
          this.userInfo.has_signed = true;
        } else {
          swal("发送失败 ", result.err_msg, "error");
        }
      },
      doLogin() {
        this.loginScatterAsync(this.inviteCode);
      },
      isMobile() {
            var check = false;
            (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
            return check;
          },
      getInviteCode() {
          var sPageURL = decodeURIComponent(window.location.search.substring(1)),
          sURLVariables = sPageURL.split('&'),
          sParameterName,
          i;

          for (i = 0; i < sURLVariables.length; i++) {
              sParameterName = sURLVariables[i].split('=');

              if (sParameterName[0] === "r") {
                  return sParameterName[1] === undefined ? 0: sParameterName[1];
              }
          }
          return 0;
        },
    },
    watch: {},
  };
</script>
<style scoped>
  #yhbanner {
    background-color: #f9f9f9;
  }

  #yhsns {
    background-color: #333742;
  }

  #yhpartner {
    padding-top: 2rem;
    background-color: #333742;
  }

  .loader-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }

  .header-image {
    background-image: url("../../static/assets/background.jpg");
    background-size: 100%;
  }

  .banner-image {
    border-radius:10px;
  }

  .sns-name {
  }

  .icon {
     width: 1em; height: 1em;
     vertical-align: -0.15em;
     fill: currentColor;
     overflow: hidden;
  }
  .box {
    background: rgba(0,0,0,0.3);
  }

</style>

